<template>
  <div class="app">
    <div class="login-container">
      <video
        src="../../assets/video/5b4f55c95539b.mp4"
        autoplay="autoplay"
        muted="muted"
        loop="loop"
        class="video"
        width="1960px"
      ></video>
    </div>
    <PasswordVue
      @PasswordEvent="(PasswordState = false), (WeChatState = true)"
      @PasswordNoteEvent="(PasswordState = false), (NoteSate = true)"
      :PasswordState="PasswordState"
    />
    <NoteVue
      @NoteEvent="(NoteSate = false), (PasswordState = true)"
      :NoteSate="NoteSate"
    />
    <WeChatVue
      @WeChatEvent="(WeChatState = false), (PasswordState = true)"
      :WeChatState="WeChatState"
    />
  </div>
</template>

<script>
// import PasswordVue from "./component/Password.vue";
// import NoteVue from "./component/Note.vue";
// import WeChatVue from "./component/WeChat.vue";
export default {
  data() {
    return {
      PasswordState: true,
      NoteSate: false,
      WeChatState: false,
      // PasswordState: false,
      // NoteSate: false,
      // WeChatState: true,
    };
  },
  methods: {
    // PasswordFn() {
    //   this.PasswordState = false;
    // },
  },
  components: {
    PasswordVue: () => import("./component/Password.vue"),
    NoteVue: () => import("./component/Note.vue"),
    WeChatVue: () => import("./component/WeChat.vue"),
  },
};
</script>

<style lang="less" scoped>
.app {
  widows: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
// .login-container {
//   height: 100%;
//   width: 100%;
// }
.login-container .video {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
video {
  object-fit: contain;
  z-index: -1;
}
</style>
